@charset 'utf-8';

@import 'common';

@mixin title_c_fs{
    font-size: r(20px);
    line-height: r(20px);
    color: #c5c5c5;
    float: left;
}
@mixin title_b_fs{
    font-size: r(22px);
    float: right;
}
@mixin palte{
    display: block;
    width: 100%;
    margin-top: r(15px);
}
$user_main_fs:r(18px);
$user_main_color:#444444; 
$user_span_color:#b2b2b2;

.user_b:after{
    content: "";
    display: block;
    width: 100%;
    height: 0;
    border-top: 1px dashed #c9c9c9;
    margin-top: r(26px);
}

.main{
    margin-top: r(40px);
}
article{
    width: r(583px);
    margin: 0 auto;
    .title{
        >h3{
            font-size: r(30px);
            line-height: r(35px);
            height: r(70px);
            overflow: hidden;
        }
        .title_c{
            margin-top: r(15px);
            .like{
                margin-right: r(45px);
                img{
                    display: block;
                    width: r(21px);
                    height: r(19px);
                    margin-right: r(7px);
                    float: left;
                }
                p{
                    @include title_c_fs;
                }
            }
            .browse{
                img{
                    display: block;
                    width: r(24px);
                    height: r(14px);
                    margin-right: r(7px);
                    float: left;
                    margin-top: r(3px);
                }
                p{
                    @include title_c_fs;
                }
            }
        }
        .title_b{
            margin-top: r(10px);
            span{
                @include title_b_fs;
                color: #b20000;
            }
            p{
                @include title_b_fs;
                color: #c5c5c5;
                margin-right: r(18px);
            }
        }
    }
    .content{
        margin-top: r(42px);
        P{
            margin-top: r(36px);
            font-size: r(20px);
            color: #8b8b8b;
            text-indent: 2em;
            em{
                font-weight: bold;
                color: #000000;
            }
        }
        .p_mgt{
            margin: 0;
        }
        .space{
            text-indent: 0;
        }
        .palte_01{
            @include palte;
            height: r(271px);
        }
        .palte_02{
            @include palte;
            height: r(156px);
        }
        .palte_03{
            @include palte;
            height: r(258px);
        }
        .palte_04{
            @include palte;
            height: r(170px);
        }
        .palte_05{
            @include palte;
            height: r(242px);
        }
        .palte_06{
            @include palte;
            height: r(299px);
        }
        .palte_07{
            @include palte;
            height: r(277px);
        }
    }
}
.page_wrap{
    margin-top: r(20px);
    .bor_color{
        width: 100%;
        height: r(19px);
        background: #efefef;
    }
    .page{
        width: r(583px);
        margin: 0 auto;
        font-size: r(18px);
        color: #727171;
        line-height: r(80px);
        a{
            color: inherit;
        }
        span{
            font-size: r(21px);
            font-weight: bold;
        }
    }
}
.comment{
    
}
.comt_wrap{
    width: r(330px);
    margin: r(38px) auto;
    .com{
        margin-right: r(56px);
        .com_pic{
            width: r(72px);
            height: r(72px);
            border-radius: 100%;
            border: 1px solid #8b8b8b;
            .pic_01{
                display: block;
                width: r(30px);
                height: r(27px); 
                margin: 0 auto;
                margin-top: r(20px);
            }
            .pic_02{
                display: block;
                width: r(34px);
                height: r(32px);
                margin: 0 auto;
                margin-top: r(18px);
            }
            .pic_03{
                display: block;
                width: r(22px);
                height: r(33px);
                margin: 0 auto;
                margin-top: r(18px);
            }
        }
        p{
            font-size: r(20px);
            line-height: r(20px);
            text-align: center;
            margin-top: r(8px);
        }
    }
}
.comb_wrap{
    width: r(583px);
    margin: 0 auto;
    textarea{
        display: block;
        width: 100%;
        height: r(192px);
        border-color: #c9c9c9;
        padding: r(10px);
        resize: none;
    }
    input{
        display: block;
        width: r(395px);
        height: r(53px);
        background: #b20000;
        color: #ffffff;
        font-size: r(26px);
        text-align: center;
        margin-top: r(18px);
        margin-left: r(95px);
    }
}
.message{
    width: r(583px);
    margin: 0 auto;
    margin-top: r(50px);
    padding: 0 r(6px);
    >p{
        font-size: $user_main_fs;
        color: #727171;
        span{
            text-decoration: underline;
        }
    }
    .user{
        .name_wrap{
            margin-top: r(27px);
            .avatar{
                width: r(50px);
                height: r(50px);
                overflow: hidden;
                margin-right: r(12px);
                border-radius: 100%;
                img{
                    @include img;
                }
            }
            .name{
                p{
                    font-size: $user_main_fs;
                    line-height: r(50px);
                    color: $user_main_color;
                    span{
                        color: #b2b2b2;
                    }
                }
               
            }
        }
    }
    .cont{
        margin: 0 r(13px);
        margin-top: r(13px);
        .title{
            span{
                font-size: $user_main_fs;
                color: $user_span_color;
                float: right;
            }
            p{
                font-size: r(22px);
                color: $user_main_color;
                float: left;
            }
        }
        .reply_wrap{
            margin-top: r(16px);
            margin-left: r(5px);
            >p{
                text-align: right;
                font-size: $user_main_fs;
                color: $user_main_color;
                i{
                    color: $user_span_color;
                    vertical-align: middle;
                }
            }
            .reply{
                width: r(534px);
                background: #fafafa;
                overflow: hidden;
                .item_wrap{
                    width: r(517px);
                    margin: 0 auto;
                    border-bottom: 1px dashed #cdcdcd;
                    overflow: hidden;
                    .item{
                        margin-top: r(19px);
                        margin-left: r(14px);
                        padding-bottom: r(14px);
                        .avatar{
                            width: r(40px);
                            height: r(40px);
                            border-radius: 100%;
                            overflow: hidden;
                            margin-right: r(15px);
                            img{
                                @include img;
                            }
                        }
                        .name{
                            P{
                               font-size: $user_main_fs;
                               line-height: r(40px);
                               color: $user_main_color; 
                               margin-right: r(5px);
                            }
                        }
                        .cont_text{
                            margin-top: r(9px);
                            p{
                               font-size: $user_main_fs;
                               line-height: r(27px);
                               color: $user_main_color;  
                            }
                        }
                        .time{
                            margin-top: r(17px);
                            p{
                                font-size: $user_main_fs;
                                color: $user_span_color;
                                float: right; 
                            }
                        }
                    }
                }
                .input_wrap{
                    width: r(496px);
                    margin:  0 auto;
                    margin-top: r(20px);
                    margin-bottom: r(11px);
                    textarea{
                        display: block;
                        width: 100%;
                        height: r(72px);
                        border-color: #c9c9c9;
                        padding: r(10px);
                        resize: none;
                    }
                    input{
                        display: block;
                        width: r(176px);
                        height: r(46px);
                        color: #ffffff;
                        margin-top: r(8px);
                        background: #b20000;
                        float: right;
                    }
                }
            }
        }
    }
}

